import React from 'react';

function Calendar() {
  const currentDate = new Date(); // 当前日期
  const daysToShow = 7; // 要显示的天数

  // 获取七天的日期数组
  const getDates = () => {
    const dates = [];
    for (let i = 0; i < daysToShow; i++) {
      const date = new Date();
      date.setDate(currentDate.getDate() + i);
      dates.push(date);
    }
    return dates;
  };

  const formatDate = (date) => {
    // const month = date.getMonth() + 1;
    const day = date.getDate();
    return `${day}`;
  };

  const getDayOfWeek = (date) => {
    const days = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
    const dayIndex = date.getDay();
    return days[dayIndex];
  };

  return (
    <div style={{ marginTop: '20px', display: 'flex', justifyContent: 'space-between' }}>
      {getDates().map((date, index) => {
        const isCurrentDate = date.toDateString() === currentDate.toDateString(); // 是否为今天
        const backgroundColor = isCurrentDate ? '#8377ea' : 'transparent'; // 背景色
        const color = isCurrentDate ? 'white' : 'black'; // 文本颜色

        return (
          <>
          <div
            key={index}
            style={{
              marginRight: '10px',
              fontWeight: isCurrentDate ? 'bold' : 'normal',
              color: color,
              borderRadius: '50%',
              backgroundColor: backgroundColor,
              padding: '10px',
              width: '50px',
              height: '50px',
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'center',
              alignItems: 'center',
              position: 'relative',
            }}
          >
            <div style={{ fontSize: '16px', textAlign: 'center' }}>{getDayOfWeek(date)}</div>
            <div style={{ fontSize: '14px', textAlign: 'center' }}>{formatDate(date)}</div>
          </div>
          </>
        );
      })}
    </div>
  );
}

export default Calendar;
